<template>
	<view>
		<u-form-item :class="`z-form-item ${disabled ? 'disabled' : ''}`" :label="label" :label-width="labelWidth" :prop="prop" :required="required"
			:borderBottom="true">
			<u-input v-model="modelValue" :disabled="disabled" :readonly="readonly" border="none"></u-input>
		</u-form-item>
	</view>
</template>

<script>
	export default {
		props: ['value', 'label', 'prop', 'required', 'disabled', 'readonly', 'labelWidth'],
		data() {
			return {
				modelValue: ''
			}
		},
		mounted() {
			// input 不能直接绑定 value 进行修改，所以需要一个中间变量
			this.modelValue = this.value
		},
		watch: {
			modelValue: {
				handler(newVal, oldVal) {
					this.$emit('change', newVal)
				},
				deep: true
			},
			value: {
				handler(n, o) {
					this.modelValue = n
				},
				deep: true
			}
		}
	}
</script>

<style>
</style>